<template>
  <Row class="search" type="flex" align="middle">
    <img src="/img/logo.jpg" alt="" srcset="">
    <Col class="search-title" span="8" offset="4">
      <router-link to="/" tag="span">欢迎光临零食小铺！</router-link>

      <p>好吃吃不完~</p></Col
    >
    <div span="8">
      <Input
        search
        placeholder="零食、分类"
        class="search-ipt"
        v-model="key"
        @on-enter="search"
      ></Input>
    </div>
  </Row>
</template>

<script>
export default {
  data() {
    return {
      key: ""
    };
  },
  methods: {
    search() {
      this.$emit("search", this.key);
      this.$router.push("/list?key=" + this.key);
    }
  }
};
</script>

<style lang="scss" scoped>
.search {
  margin: 0 auto;
  background: #933;
  height: 200px;
  .search-title {
    font-size: 42px;
    font-weight: 500;
    margin-left: 80px;
    color: #fff;
    cursor: pointer;
    p {
      font-size: 16px;
    }
  }
  .search-ipt {
    width: 460px;
  }
}
img {
  width: 150px;
  height: 100px;
  margin-left: 30px;
  z-index: 999;
}
</style>
